<template>
	<view :style="{'--color':color}" class="p-bot150">

		<statusBar ref='statusbar' title='会员中心' :back='0'></statusBar>

		<view class=" Vipoptions" v-if="pageData">
			<u-tabs :list="pageData" :current="current" :lineColor="color" :itemStyle="itemStyle" :lineWidth="24"
				:activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :scrollable="false" keyName="vip_name"
				@click="click"></u-tabs>
		</view>

		<view class="rows m-top20" v-if="pageData.length">
			<view class="rows" v-if="current == 0">
				<u-parse :content="pageData[0].content" :domain="imgUrl" @ready="Load = false"></u-parse>
			</view>
			<view class="rows" v-if="current == 1">
				<u-parse :content="pageData[1].content" :domain="imgUrl"></u-parse>
			</view>
		</view>

		<view class="liberal_View">
			<view class="liberal d-flex a-center j-centert white" @click="playVip">
				<view class="d-flex f-column a-center" v-if="is_buy">
					<view class="d-flex a-center white size26">
						<text>立即续费{{liberal_Txt}}</text>
						<text class="h6 m-top4">￥</text>
						<text class="size28">{{liberal_price}}</text>
					</view>
					<text class="white h7 ">有效期至 {{pageData[current].expire_at}}</text>


				</view>
				<block v-else>
					<text class="size34">{{liberal_Txt}}</text>
					<text class="h6 m-top4">￥</text>
					<text class="size34">{{liberal_price}}</text>
				</block>
			</view>
		</view>
		<tabBar :tab="16"></tabBar>
		<showModel @cancelFunc='showModal = false' goHome='0' v-if='showModal' type='2'></showModel>
		<!-- 	<Load v-if="Load"></Load> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import statusBar from '@/components/status-bar/status-bar.vue'
	export default {
		components: {
			statusBar
		},
		data() {
			return {
				Load: true,
				showModal: false,
				imgUrl: this.imgUrl,
				list1: [{
					name: '月卡会员',
				}, {
					name: '年卡会员',
				}],
				current: 0,
				itemStyle: {
					height: '36px'
				},
				activeStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					transform: 'scale(1.04)'
				},
				inactiveStyle: {
					transform: 'scale(1)',
					fontSize: '30rpx',
				},

				pageData: [],
				palyState: true,
			}
		},
		onLoad() {
			this.activeStyle['color'] = this.color;
		},
		onShow() {
			this.buyVipList();
			let options = wx.getEnterOptionsSync();
			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
				let extraData = options.referrerInfo.extraData;
				if (!extraData) return;
				if (extraData.code == 'success') {
					this.buyVipList();
				}
			}
		},
		methods: {
			buyVipList() {
				this.$http.get({
					url: '/goodsLessonsApi/buyVipList',
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data || []
					this.pageData = result;
				})
			},
			click(e) {
				this.current = e.index;
			},

			playVip() {
				let that = this;
				if (!that.vid) return that.showModal = true;
				if (!that.palyState) return;
				that.palyState = false;
				that.$http.get({
					url: '/accountPay/getVipPayInfo',
					data: {
						vip_id: that.pageData[that.current].vip_id
					}
				}).then(res => {
					that.palyState = true
					if (res.code != '100') return that.$Toast(res.msg);
					const result = res.data;
					if (result.extraData) {
						wx.openEmbeddedMiniProgram({
							appId: result.appId,
							extraData: result.extraData
						});
					} else {
						that.$pop.getPayment(result).then(pay => {
							that.buyVipList();
						})
					}


				})
			},


		},
		computed: {
			...mapState(['color', 'share', 'vid']),
			liberal_Txt() {
				if (!this.pageData.length) return;
				return `${this.pageData[this.current].vip_name}：`;
			},
			liberal_price() {
				if (!this.pageData.length) return;
				return `${this.pageData[this.current].vip_price}`;
			},
			is_buy() {
				if (!this.pageData.length) return;
				return this.pageData[this.current].is_buy == 1 ? true : false;
			}



		},
		onShareAppMessage() {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}`,
				imageUrl: share.imageUrl
			}
		},
	}
</script>
<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.Vipoptions {
		width: 710rpx;
		margin: 0 auto;
		height: 80rpx;
	}

	.liberal_View {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 150rpx;
		z-index: 100;
		display: flex;
		justify-content: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.liberal {
		color: #ffffff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
		background-color: var(--color);
		z-index: 100;
	}

	// #ifdef MP-WEIXIN
	.liberal {
		bottom: 40rpx;
	}

	// #endif
	// #ifdef H5
	.liberal {
		bottom: 140rpx;
	}

	// #endif
</style>